import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withConsumer } from '../../../context';
import styles from './index.module.scss';
import classNames from 'classnames';
import { FragmentCode } from '@/components/basicComp/FragmentCode';
import { FragmentPreview } from '@/components/fragment-preview';
import { FragmentRfp } from '@/components/fragment-rfp';
import Header from './Header';
import { update } from '@/utils/immutableUtil';

@withConsumer
@connect(({ ppt }) => ({
  fragment: ppt.fragment,
  codeResult: ppt.codeResult,
  itemIndex: ppt.itemIndex,
  currentTab: ppt.currentTab,
  openPreview: ppt.openPreview,
  previewType: ppt.previewType,
}))
class Comp extends Component {
  shouldComponentUpdate = (np, ns) => update.call(this, np, ns);
  render() {
    const {
      fragment,
      codeResult,
      itemIndex,
      currentTab,
      openPreview,
      previewType,
    } = this.props;
    const {
      value: { changeState, controller },
    } = this.props;
    return (
      <div
        className={classNames([
          styles.preview,
        ])}
      >
        <Header
          onClose={() => {
            changeState({ openPreview: false });
          }}
        />

        <div className={styles.code}>
          <div className={styles.codeCont}>
            {currentTab === 'code' && (
              <>
                {fragment.code && fragment.file_path && (
                  <div>
                    <FragmentCode
                      files={[
                        {
                          name: fragment.file_path,
                          content: fragment.code,
                        },
                      ]}
                    />
                  </div>
                )}
              </>
            )}

            {currentTab === 'fragment' && (
              <>
                {previewType == 'iframe' && (
                  <FragmentRfp
                    html={fragment.code}
                    onClose={() => {
                      changeState({ openPreview: false });
                    }}
                  />
                )}
                {previewType == 'e2b' && codeResult && (
                  <FragmentPreview
                    result={codeResult}
                    onClose={() => {
                      changeState({ openPreview: false });
                    }}
                  />
                )}
              </>
            )}
          </div>
        </div>

      </div>
    );
  }
}

export default Comp;
